<template>
  <el-container class="layout">
    <el-aside :width="showBar ? '300px' : '0'" class="aside">
      <!-- <LeftBar :show-bar="showBar" @child-event="parentEvent" /> -->
    </el-aside>

    <el-container>
      <el-header>
        <!-- <Header /> -->
      </el-header>

      <el-main class="contentParent">
        <el-container class="contentStage">
          <slot />
        </el-container>
        <!-- <Footer /> -->
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
// import Util from '@/libs/util'
// import Header from '@/components/Header'
// import LeftBar from '@/components/LeftBar'
// import Footer from '@/components/Footer'
// import Axios from '@/libs/axios'

export default {
  components: {
    // Header,
    // LeftBar,
    // Footer
  },
  data() {
    return {
    }
  },
  mounted: function() {
  },
  methods: {
  }
}
</script>

<style scoped lang="scss">
.layout {
    .aside {
        transition: all 0.15s linear;
        background: #38415d;
    }
    .contentParent {
        display: flex;
        flex-direction: column;
        padding: 15px;
        background: url("../assets/container_bg.png") #f5f5f5 repeat-x;

        .contentStage {
            flex: 1;
        }
    }
}
</style>
